import printJs from 'print-js'
import html2canvas from 'html2canvas'

function onPrint ($el) {
  const printContent = $el // 获取上面的ref对应的组件实例
  // 获取dom 宽度 高度
  const width = printContent.clientWidth + 2 // 如果有边框可适当增加2~10之间的画布大小
  const height = printContent.clientHeight + 2// 如果有边框可适当增加2~10之间的画布大小
  // 创建一个canvas节点
  const canvas = document.createElement('canvas')

  const scale = 10 // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
  canvas.width = width * scale // 定义canvas 宽度 * 缩放
  canvas.height = height * scale // 定义canvas高度 *缩放
  canvas.style.width = width * scale + 'px'
  canvas.style.height = height * scale + 'px'
  canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale

  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
  const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft // 获取水平滚动轴的长度

  html2canvas(printContent, {
    canvas,
    backgroundColor: null,
    useCORS: true,
    windowHeight: document.body.scrollHeight,
    scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
    scrollY: -scrollTop
  }).then((canvas) => {
    const url = canvas.toDataURL('image/png')
    printJs({
      printable: url,
      type: 'image',
      scanStyles: false,
      documentTitle: '', // 标题
      style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
    })
  }).catch(err => {
    console.error(err)
  })
}

export {
  onPrint
}
